<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="./public/font/iconfont.css">
	<style>
		/* 全局样式 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		/* 公共样式 */
		.flex-center {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.flex-between {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		/* 移动端头部 */
		#tm_header--m {
			position: sticky;
			height: 60px;
			background-color: #1b5390;
			padding: 0 10px;
			top: 0;
			z-index: 4;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tm_header--m-logo {
			height: 30px;
			cursor: pointer;
			object-fit: contain;
		}

		.tm_header--icon {
			width: 24px;
			height: 24px;
			font-size: 24px;
			color: white;
			cursor: pointer;
		}

		/* 移动端抽屉菜单 */
		#mobileDrawer {
			position: fixed;
			top: 0;
			right: 0;
			width: 60%;
			height: 100vh;
			background: white;
			z-index: 20001;
			transform: translateX(100%);
			transition: transform 0.3s ease;
		}

		#mobileDrawer.show {
			transform: translateX(0);
		}

		.tm_header--menu {
			list-style: none;
			padding: 20px 0;
			border-right: none;
		}

		.tm_header--menu-list {
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			color: #333 !important;
			padding: 0 20px;
		}

		.tm_header--menu-list a {
			display: block;
			width: 100%;
			height: 100%;
		}

		/* PC端头部 */
		#tm_header--pc {
			position: sticky;
			height: 80px;
			background-color: #1b5390;
			padding: 0 25px 0 50px;
			top: 0;
			z-index: 4;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		#tm_header--pc .international {
			position: relative;
		}

		#tm_header--pc .international .fi-guojihua {
			font-size: 20px;
			color: #fff;
			cursor: pointer;
		}

		#tm_header--pc .international .poper {
			display: none;
			position: absolute;
			bottom: -80px;
			background-color: #fff;
			left: -25px;
			padding: 10px;
			z-index: 99;
		}

		.poper::before,
		.poper::after {
			display: inline-block;
			content: '';
			position: absolute;
			border: 5px solid transparent;
		}


		.poper::after {
			left: 30px;
			top: -10px;
			border-bottom-color: #fff;
		}

		#tm_header--pc .international .poper .cn {
			margin-bottom: 5px;
			cursor: pointer;
			padding-bottom: 5px;
			border-bottom: 1px solid #ccc;
		}

		#tm_header--pc .international .poper .en {
			cursor: pointer;
		}

		.tm_header--pc-logo {
			height: 40px;
			cursor: pointer;
			object-fit: cover;
		}

		.tm_header--pc-menus {
			display: flex;
			list-style: none;
			height: 80px;
			background-color: #1b5390;
			border-bottom: none;
			margin: 0;
			padding: 0;
		}

		.tm_header--pc-menu {
			height: 80px;
			line-height: 80px;
			font-size: 16px;
			color: white;
			padding: 0 24px;
			border-bottom: none;
			position: relative;
			flex-shrink: 0;
		}

		.tm_header--pc-menu:hover {
			color: #333 !important;
			background: #fff;
		}

		.tm_header--pc-menu.active {
			color: white !important;
		}

		.class-word {
			color: #fff;
		}

		.class-word .cl-cn {
			cursor: pointer;
			margin-right: 5px;
		}

		.class-word .cl-en {
			cursor: pointer;
			margin-left: 5px;
		}

		.tm_header--pc-right {
			display: flex;
			align-items: center;
			flex-shrink: 0;
		}

		.tm_header--pc-member {
			height: 16px;
			line-height: 16px;
			font-size: 16px;
			color: white;
			padding: 0 6px;
			cursor: pointer;
			border-right: 1px solid #fff;
			white-space: nowrap;
		}

		.tm_header--pc-member-icon {
			margin-right: 5px;
		}

		.tm_header--pc-search {
			width: 26px;
			height: 16px;
			line-height: 16px;
			font-size: 18px;
			text-align: center;
			color: white;
			border-right: 1px solid #fff;
		}

		/* 子菜单样式 */
		.sub-menu {
			position: absolute;
			top: 80px;
			left: 0;
			background: white;
			/* min-width: 150px; */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			display: none;
			font-size: 16px;
			line-height: 20px;
			text-align: left;
		}

		.has-submenu:hover .sub-menu {
			display: block;
		}

		.sub-menu-item {
			padding: 10px 24px;
			color: #333 !important;
			width: 200px;
			border-bottom: 1px solid #ccc;
		}

		.sub-menu-item:hover {
			background: #f5f5f5;
		}

		/* 按钮样式 */
		.menu-button {
			display: block;
			width: 60%;
			padding: 10px 20px;
			text-align: left;
			border: none;
			background: none;
			cursor: pointer;
		}

		.button-primary {
			background: #1b5390;
			color: white;
		}

		.button-success {
			background: #67C23A;
			color: white;
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			#tm_header--pc {
				display: none;
			}
		}

		@media (min-width: 769px) {
			#tm_header--m {
				display: none;
			}
		}

		/* 弹窗样式 */
		.dialog-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}

		.dialog-container {
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			padding: 20px;
			width: 50%;
			min-width: 300px;
			max-width: 600px;
		}

		.dialog-header {
			margin-bottom: 20px;
			font-size: 18px;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.dialog-header .fi {
			margin-left: auto;
			font-weight: normal;
			color: #999;
			cursor: pointer;
		}

		.form-item {
			margin-bottom: 18px;
		}

		.form-input {
			width: 100%;
			padding: 10px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
		}

		.captcha-container {
			display: flex;
			gap: 10px;
		}

		.captcha-image {
			width: 100px;
			height: 40px;
			border: 1px solid #dcdfe6;
			cursor: pointer;
		}

		.link {
			color: #409eff;
			cursor: pointer;
			font-size: 14px;
			margin-right: 15px;
		}

		.login-btn {
			background-color: #409eff;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 4px;
			cursor: pointer;
		}

		/* 响应式调整 */
		@media (max-width: 768px) {
			.dialog-container {
				width: 90%;
			}
		}
	</style>
</head>

<body>
	<!-- 移动端头部 -->
	<header id="tm_header--m">
		<a href="./index.html">

			<img class="tm_header--m-logo" alt="logo"
				src="https://paidou.cdn.dgyunju.cn/image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240517115326.jpg">
		</a>
		<i class="tm_header--icon fi fi-menus" onclick="toggleDrawer()"></i>
	</header>

	<!-- 移动端抽屉菜单 -->
	<div id="mobileDrawer">
		<ul class="tm_header--menu">
			<!-- 首页 -->
			<li class="tm_header--menu-list">
				<a href="./index.html">HOME</a>
			</li>

			<!-- 产品 -->
			<li class="tm_header--menu-list has-submenu">
				<a href="./product.html">PRODUCTS</a>

			</li>

			<!-- 服务 -->
			<li class="tm_header--menu-list has-submenu">
				<a href="./support.html">SERVE</a>

			</li>
			<li class="tm_header--menu-list has-submenu">
				<a href="./infomation.html">NEWS</a>

			</li>
			<li class="tm_header--menu-list">
				<a href="./download.html">DOWNLOAD</a>
			</li>
			<li class="tm_header--menu-list">
				<a href="./about.html">ABOUT</a>
			</li>
			<!-- 会员按钮 -->
			<li class="tm_header--menu-list" style="margin-bottom: 10px;">
				<button class="menu-button button-primary login">
					<i class="fi fi-member"></i>
					<span>登录/注册</span>
				</button>
			</li>

			<!-- 搜索按钮 -->
			<li class="tm_header--menu-list" style="margin-bottom: 10px;">
				<button class="menu-button button-success">
					<a href="./search.html">
						<i class="fi fi-search"></i>
						<span>搜索</span>
					</a>
				</button>
			</li>
			<li class="tm_header--menu-list" style="display: flex;font-size: 14px;">
				<button style="width: 80px;height:40px;background-color: #4ba0f9;border: none;color: #fff;margin-right: 10px;"
					class="cl-cn">中文</button>
				<button style="width: 80px;height:40px;background-color: #f36a6e;border: none;color: #fff;" class="cl-en">
					EN
				</button>
			</li>
		</ul>
	</div>

	<!-- PC端头部 -->
	<header id="tm_header--pc">
		<a href="./index.html">
			<img class="tm_header--pc-logo" alt="logo"
				src="https://paidou.cdn.dgyunju.cn/image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240517115326.jpg">
		</a>
		<ul class="tm_header--pc-menus">
			<!-- 首页 -->
			<li class="tm_header--pc-menu">
				<a href="./index.html">HOME</a>
			</li>

			<!-- 产品 -->
			<li class="tm_header--pc-menu has-submenu">
				<a href="./product.html">PRODUCTS</a>
				<ul class="sub-menu">
					<li class="sub-menu-item"><a href="./product.html">PRODUCTS</a></li>
					<li class="sub-menu-item"><a href="./product.html">PRODUCTS</a></li>
				</ul>
			</li>

			<!-- 服务 -->
			<li class="tm_header--pc-menu has-submenu">
				<a href="./support.html">SERVE</a>
				<ul class="sub-menu">
					<li class="sub-menu-item"><a href="./support.html">SERVE</a></li>
					<li class="sub-menu-item"><a href="./support.html">SERVE</a></li>
				</ul>
			</li>
			<li class="tm_header--pc-menu has-submenu">
				<a href="./infomation.html">NEWS</a>
				<ul class="sub-menu">
					<li class="sub-menu-item"><a href="./infomation.html">NEWS</a></li>
					<li class="sub-menu-item"><a href="./infomation.html">NEWS</a></li>
				</ul>
			</li>
			<li class="tm_header--pc-menu">
				<a href="./download.html">DOWNLOAD</a>
			</li>
			<li class="tm_header--pc-menu">
				<a href="./about.html">ABOUT</a>
			</li>
		</ul>
		<!-- <div class="international">
			<i class="fi fi-guojihua"></i>
			<div class="poper">
				<div class="cn">中文</div>
				<div class="en">English</div>
			</div>
		</div> -->
		<div class="tm_header--pc-right">
			<div class="tm_header--pc-member login" onclick="handleMemberClick()">
				<i class="tm_header--pc-member-icon fi fi-member"></i>
				<span>登录/注册</span>
			</div>

			<a class="tm_header--pc-search" href="./search.html">
				<i class="fi fi-search"></i>
			</a>
		</div>
		<div class="tm_header--pc-right class-word">
			<div class="cl-cn">中文</div>
			<span>/</span>
			<div class="cl-en">
				EN
			</div>
		</div>
	</header>
	<!-- 弹窗结构 -->
	<div class="dialog-mask" id="loginDialog" style="display: none;">
		<div class="dialog-container">
			<div class="dialog-header">
				<p>登录</p>
				<i class="fi cancel-btn">x</i>
			</div>
			<form id="loginForm">
				<div class="form-item">
					<input type="text" class="form-input" id="username" placeholder="请输入用户名">
				</div>

				<div class="form-item">
					<input type="password" class="form-input" id="password" placeholder="请输入密码">
				</div>

				<!-- <div class="form-item">
					<div class="captcha-container">
						<input type="text" class="form-input" id="captcha" placeholder="图形验证码" style="flex: 1">
						<img src="" class="captcha-image" id="captchaImage" alt="图形验证码">
					</div>
				</div> -->

				<div class="form-item">
					<span>还没有账号？</span>
					<a href="./sign-up.html" class="link" id="signUpLink">去注册</a>
				</div>

				<div class="form-item">
					<a href="./reset.html" class="link" id="forgetLink">忘记密码</a>
				</div>

				<div class="form-item">
					<button type="button" class="login-btn" id="loginBtn">登录</button>
				</div>
			</form>
		</div>
	</div>
	<script src="./public/js/header.js"></script>
	<script>
		// 移动端抽屉菜单切换
		function toggleDrawer () {
			document.getElementById('mobileDrawer').classList.toggle('show');
		}

		// 关闭菜单点击外部区域
		document.addEventListener('click', function (event) {
			const drawer = document.getElementById('mobileDrawer');
			const menuToggle = document.querySelector('#tm_header--m .tm_header--icon');

			if (drawer.classList.contains('show') &&
				!drawer.contains(event.target) &&
				event.target !== menuToggle) {
				drawer.classList.remove('show');
			}
		});
	</script>
</body>

</html>